﻿
@{
    ViewBag.Title = "菜单管理";
    Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml";
}
<div class="page-container" id="navigations">
    <div class="page-body">
        <div class="row">
            <div class="col-sm-8">
                <div class="widget flat radius-bordered">
                    <div class="widget-header bg-blue">
                        <span class="widget-caption">菜单管理</span>
                        <div class="widget-buttons">
                            <a href="#" style="margin-top:10px;" v-on:click="add(0);">
                                <i class="fa fa-plus"></i>
                            </a>
                        </div>
                    </div>

                    <div class="widget-body">
                        <div class="tree tree-solid-line">
                            <nodes :nodes="navigations"></nodes>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/x-template" id="node">
    <template v-for="node in nodes">
        <template v-if="node.children.length>0">
            <div class="tree-folder">
                <div class="tree-folder-header">
                    <i class="palegreen fa fa-folder"></i>
                    <div class="tree-folder-name">
                        <span>{{node.name}}</span>
                        <div class="tree-actions">
                            <i class="fa fa-plus" v-on:click="add(node.id);"></i>
                            <i class="fa fa-edit" v-on:click="edit(node);"></i>
                            <i class="fa  fa-long-arrow-up" v-on:click="up(node.id);"></i>
                            <i class="fa  fa-long-arrow-down" v-on:click="down(node.id);"></i>
                            <i class="fa fa-trash-o" v-on:click="down(node.id);"></i>
                        </div>
                    </div>
                </div>
                <div class="tree-folder-content">
                    <nodes :nodes="node.children"></nodes>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="tree-item">
                <i class="tree-dot"></i>
                <div class="tree-item-name">
                    <span>{{node.name}}【{{node.navigationType==2?"角色访问":node.navigationType==1?"登录访问":"游客访问"}}】【{{node.url}}】</span>
                    <div class="tree-actions">
                        <i class="fa fa-plus" v-on:click="add(node.id);"></i>
                        <i class="fa fa-edit" v-on:click="edit(node);"></i>
                        <i class="fa  fa-long-arrow-up" v-on:click="up(node.id);"></i>
                        <i class="fa  fa-long-arrow-down" v-on:click="down(node.id);"></i>
                        <i class="fa fa-trash-o" v-on:click="down(node.id);"></i>
                    </div>
                </div>
            </div>
        </template>
    </template>
</script>

<div id="model" class="layer-row-container">
    <div class="row">
        <div class="col-sm-12">
            <form class="form-horizontal form-bordered" role="form">
                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label no-padding-right">菜单名称</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="name">
                    </div>
                </div>
                <div class="form-group">
                    <label for="url" class="col-sm-2 control-label no-padding-right">Url地址</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="url">
                    </div>
                </div>
                <div class="form-group">
                    <label for="navigationType" class="col-sm-2 control-label no-padding-right">访问类型</label>
                    <div class="col-sm-10">
                        <select class="form-control" id="navigationType">
                            @foreach (var item in ViewBag.NavigationTypes)
                            {
                                <option value="@item.Value">@item.DisplayText</option>
                            }
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="icon" class="col-sm-2 control-label no-padding-right">图标</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="icon">
                    </div>
                </div>
                <div class="form-group">
                    <label for="remark" class="col-sm-2 control-label no-padding-right">备注</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="remark">
                    </div>
                </div>
                <hr class="wide" />
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    function popup(navigation) {
        layer.open({
            title: navigation.title,
            type: 1,
            area: "40%",
            content: $("#model"),
            btn: ["保存", "取消"],
            success: function () {
                $("#name").val(navigation.name);
                $("#url").val(navigation.url);
                $("#icon").val(navigation.icon);
                $("#remark").val(navigation.remark);
                $("#navigationType").val(navigation.navigationType);
            },
            yes: function (index, layero) {
                var dto = {
                    id: navigation.id,
                    title:"编辑菜单",
                    name: $("#name").val(),
                    url: $("#url").val(),
                    icon: $("#icon").val(),
                    remark: $("#remark").val(),
                    navigationType: $("#navigationType").val(),
                    parentId: navigation.parentId
                }
                var action = navigation.id > 0 ? "UpdateNavigation" : "CreateNavigation"
                $.bode.ajax("/api/services/zero/navigation/"+action, dto, function () {
                    vm.reload();
                    layer.msg("保存成功");
                    layer.close(index);
                });
            },
            cancel: function () { }
        });
    }

    function addNavigation(parentId) {
        popup({
            id: 0,
            title:"新增菜单",
            name: "",
            url: "",
            icon: "",
            remark: "",
            navigationType: 0,
            parentId: parentId
        });
    }

    Vue.component('nodes', {
        template: '#node',
        data: function () { return {}; },
        props: ['nodes'],
        methods: {
            add: addNavigation,
            edit: function (navigation) {
                popup(navigation);
            },
            up: function (id) {
                $.bode.ajax("/api/services/zero/navigation/NavigationUp", { id: id }, function () {
                    vm.reload();
                    layer.msg("保存成功");
                });
            },
            down: function (id) {
                $.bode.ajax("/api/services/zero/navigation/NavigationDown", { id: id }, function () {
                    vm.reload();
                    layer.msg("保存成功");
                });
            }
        }
    });

    var vm = new Vue({
        el: "#navigations",
        data: {
            navigations: []
        },
        methods: {
            add: addNavigation,
            reload: function () {
                var self = this;
                $.bode.ajax("/api/services/zero/navigation/GetAllNavigations", {}, function (navigations) {
                    self.navigations = navigations;
                })
            }
        },
        created: function () {
            this.reload();
        }
    });
</script>
